import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import {
	TopicWrapper,
	TopicItem
} from '../style';
import logoPic from '../../../statics/logo.png';

class Topic extends PureComponent {
	render() {
		const { list } = this.props;
		return (
			<TopicWrapper>
				{
					list.map((item) => (
							<TopicItem key={item.get('id')}>
								<img className="topic-pic" src={logoPic} alt="" />
								{ item.get('title') }
							</TopicItem>
						)
					)
				}
			</TopicWrapper>
		)
	}
}

const mapStateToProps = (state) => ({
	list: state.getIn(['home', 'topicList'])
})

export default connect(mapStateToProps, null)(Topic);